<script setup>
import PageContainer from '@/components/PageContainer.vue'
import {ref, onMounted} from 'vue'
import {
  ArticleDelService,
  ArticleListGetService,
} from '@/api/user.js'
import { Delete, Edit } from '@element-plus/icons-vue'

import ChannelSelect from '@/views/article/components/ChannelSelect.vue'
import {formatTime} from '@/utils/format.js'
import ArticleEdit from '@/views/article/components/ArticleEdit.vue'

const total = ref(1)

const handleSizeChange = (val) => {
  search.value.pagenum = 1
  getArticleList()
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  getArticleList()
  console.log(`current page: ${val}`)
}

const loading = ref(true)
const articleList = ref([])
const search = ref({
  pagenum: 1,
  pagesize: 5,
})

const getArticleList = async () => {
  loading.value = true
  const res = await ArticleListGetService(search.value)
  console.log(res)
  articleList.value = res.data.data.list
  total.value = res.data.data.total
  console.log(total.value)
  loading.value = false
}

const deleteArticle = async (row) => {
  const res = await ArticleDelService(row.id)
  console.log('delete:', res)
  await getArticleList()
}

onMounted(async () => {
  await getArticleList()
})

const drawer = ref()

const stateFormatter = (row)=> {
  return row.state === 0 ? '已发布' : '草稿'
}

const stateList = ref([
  {
    key: 0,
    label: '已发布',
  },
  {
    key: 1,
    label: '草稿',
  },
])

const resetSearch = () => {
  search.value.cate_id = null
  search.value.state = null
  getArticleList()
}
</script>

<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button type="primary" @click="drawer.addArticle()">添加文章</el-button>
    </template>
    <div class="search-container">
      <div class="search-item">
      <span class="search-label">文章分类</span>
<!--        v-model是modelValue和@update:modelValue的简写-->
       <channel-select v-model="search.cate_id"/>
      </div>

      <div class="search-item">
      <span class="search-label">发布状态</span>
      <el-select
        v-model="search.state"
        placeholder="Select"
        size="large"
        style="width: 240px"
        >
        <el-option
          v-for="item in stateList"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
       </el-select>
      </div>

      <div>
        <el-button type="primary" @click="getArticleList">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
    </div>
    <el-scrollbar height="400px">
      <div>
      <el-table v-loading="loading" :data="articleList" style="width: 100%">
        <el-table-column prop="title" label="文章标题" >
          <template #default="{ row }">
            <el-link :underline="false" type="primary">{{row.title}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="cate_name" label="分类" />
        <el-table-column label="发布时间" prop="pub_date"  >
          <template #default="{ row }">
            {{ formatTime(row.pub_date) }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" :formatter="stateFormatter"/>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button type="primary" :icon="Edit" circle plain @click="drawer.editArticle(row)" />
            <el-button type="danger" :icon="Delete" circle plain @click="deleteArticle(row)" />
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="description" />
        </template>
      </el-table>
      </div>
    </el-scrollbar>

    <div class="pagination-block">
    <el-pagination
      v-model:current-page="search.pagenum"
      v-model:page-size="search.pagesize"
      :page-sizes="[5, 10, 20, 50]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  </page-container>

  <article-edit ref="drawer" @success="getArticleList"/>
</template>

<style scoped>

.pagination-block{
  margin-top: 20px;
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-end; /* 子元素整体靠右 */
}

.search-container {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-label {
  font-size: 14px;
  white-space: nowrap;
  color: #8c939d;
}

</style>
